

*{font-family:"微软雅黑", Arial; font-size:100%; margin:0; padding:0}
body{ background:url(../img/dv_bg.jpg) center #000 no-repeat; width:100%; font-size:1em; height:100%; overflow:hidden}
.indexbg{background: url(../img/dv_bg.png) center no-repeat; position:absolute; width:100%; height:100%; z-index:98; top:0; margin:0; padding:0; display:block; overflow:hidden;}
input{border:0;outline:none;}
#canvas{ position:absolute; z-index:1; top:0}
.left{float:left;}
.right{float:right;}
.recoverybox{ margin:0.5em auto 0 auto; z-index:99; width:30%;max-width:26em;  background: rgba(0,0,0,0.5); border:1px rgba(255,255,255,0.5) solid; border-radius:20px;  -webkit-box-shadow:0 0 100px #333;  -moz-box-shadow:0 0 100px #333;  box-shadow:0 0 200px #bed8f3; padding-bottom:20px; position:relative;  display:block; overflow:hidden;   font-size:16px; font-family:"微软雅黑", Arial; color:#fff;
animation:myfirst 5s  ;
/* Firefox: */
-moz-animation:myfirst 3s  ;
/* Safari and Chrome: */
-webkit-animation:myfirst 3s   ;
/* Opera: */
-o-animation:myfirst 3s ;}
 @keyframes myfirst
{
0%   { top:-200px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   { top:-200px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   { top:-200px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-o-keyframes myfirst /* Opera */
{
0%   { top:-200px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}
  
.recoverybox .textid{ width:70%; margin:0.5em 0 0 10%;}
.recoverybox .teicon1{ background-position:.5em 0 !important;}
.recoverybox .teicon2{ background-position:.5em -2.6em !important;}
.recoverybox .teicon3{ background-position:.5em -5.2em !important;}
.recoverybox .verification{ width:43%; margin:0.5em 0.6em 0 10%; }
.header{ width:500px;}
.recoverybox h3{ padding:1.4em 15% 1em 15%; font-size:1.5em; text-align:center; font-weight:normal; color:#fff; position:relative; font-weight:bold; letter-spacing:3px;}
.recoverybox h3 i{ width:100px; height:2px; background:#cbcbcb; position:absolute; float:left;}
.recoverybox .textid,.recoverybox .verification{ background:url(../img/icon2.png) #fff no-repeat;  color:#666; border:1px solid #CCC;  height:2em; line-height:2em; font-size:1em; padding:0 1em; float:left; border-radius:50px; text-indent:2em;}
.recoverybox .recspimg{ width:6em; height:2em; overflow:hidden; border:1px solid #CCC; border-radius:2em; display:block; background:#fff; float: left; margin-top:8px}
.recoverybox .recspimg img{ width:6em; height:2em; border:0;}
.recoverybox .recspa{ width:24px; height:24px; float:left; margin:30px 0 0 5px;}
.recoverybox .recspa a{ width:24px; height:24px; background:url(../img/recoveryicon2.png) no-repeat; display:block;-webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out;}
.recoverybox .recspa a:hover{-webkit-transform: rotateZ(720deg);-moz-transform: rotateZ(720deg); -o-transform: rotateZ(720deg); -ms-transform: rotateZ(720deg); transform: rotateZ(720deg);}
.recoverybox .recsgo{ text-align:center; line-height:2.4em; height:2.4em; color:#fff; background:#09C; border:0; border-radius:50px; font-size:1em;  float:left;cursor:pointer; width:78%; margin:0.5em 0.6em 0 10%}
.recoverybox p{ float:left;  font-size:14px; line-height:20px; text-align:left; color:#fff; width:356px; margin:2px 0 0 45px; text-indent:1.6em; color:#09C}
.recoverybox p a { color:#fff; text-decoration:none; display:block; float:left; text-align:center; }
.recoverybox p span{ float:left; font-size:14px;  text-align:center; color:#fff; width:1px; background:#fff;}
.header{height:40px; font-size:14px; text-align:left; color:#fff;text-shadow:1px 1px 2px #666; margin:0 auto; }
.header span,.header span a,.header b{ display:block; float:left;color:#fff;text-shadow:1px 1px 2px #666; padding:0 5px 0 0; text-decoration:none;}
.header span a:hover{ text-decoration:none;}
.login_logo{ color:#fff;  font-weight:bold; background:url(../img/feilonglogo2_2.png) no-repeat;  text-shadow:0 0 30px #333;  position:relative; z-index:99;}
@media screen and (min-width:1920px) {
.login_logo{margin:8% auto 0 auto; width:3em; height:3em;}
	}
@media screen and (max-width:1919px) {
.login_logo{margin:3% auto 0 auto; width:2.5em; height:2.5em;}
	}



.login_logo {
animation:myfirst2 5s  ;
/* Firefox: */
-moz-animation:myfirst2 3s  ;
/* Safari and Chrome: */
-webkit-animation:myfirst2 3s   ;
/* Opera: */
-o-animation:myfirst2 3s ;}
 @keyframes myfirst2
{
0%   { top:100px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-moz-keyframes myfirst2 /* Firefox */
{
0%   { top:100px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0%   { top:100px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}

@-o-keyframes myfirst2 /* Opera */
{
0%   { top:100px;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}
100% {top: 0;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;}
}


	.login_logo{background-size:100%; line-height:60px;font-size:40px;letter-spacing:15px;}
	.bb, .bb::before, .bb::after { left:50%; bottom:5%}

	
.recoverybox:nth-child(1){
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate; 
}



/*glow for webkit*/
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #3d9dff,
               0 0 20px  #3d9dff,
               0 0 30px  #3d9dff,
               0 0 40px  #16fdfc,
               0 0 70px  #16fdfc,
               0 0 80px  #16fdfc,
               0 0 100px #16fdfc,
               0 0 200px #16fdfc;
  }
  to {
    text-shadow: 0 0 5px #3d9dff,
               0 0 10px #3d9dff,
               0 0 15px #3d9dff,
               0 0 20px #16fdfc,
               0 0 35px #16fdfc,
               0 0 40px #16fdfc,
               0 0 50px #16fdfc,
               0 0 75px #16fdfc;
  }
}

/*glow for mozilla*/
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #3d9dff,
               0 0 20px  #3d9dff,
               0 0 30px  #3d9dff,
               0 0 40px  #16fdfc,
               0 0 70px  #16fdfc,
               0 0 80px  #16fdfc,
               0 0 100px #16fdfc,
               0 0 200px #16fdfc;
  }
  to {
    text-shadow: 0 0 5px #3d9dff,
               0 0 10px #3d9dff,
               0 0 15px #3d9dff,
               0 0 20px #16fdfc,
               0 0 35px #16fdfc,
               0 0 40px #16fdfc,
               0 0 50px #16fdfc,
               0 0 75px #16fdfc;
  }
}



/*glow*/
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #3d9dff,
               0 0 20px  #3d9dff,
               0 0 30px  #3d9dff,
               0 0 40px  #16fdfc,
               0 0 70px  #16fdfc,
               0 0 80px  #16fdfc,
               0 0 100px #16fdfc,
               0 0 200px #16fdfc;
  }
  to {
    text-shadow: 0 0 5px #3d9dff,
               0 0 10px #3d9dff,
               0 0 15px #3d9dff,
               0 0 20px #16fdfc,
               0 0 35px #16fdfc,
               0 0 40px #16fdfc,
               0 0 50px #16fdfc,
               0 0 75px #16fdfc;
  }
}

.bb, .bb::before, .bb::after {
  position: absolute;
  top: 0;
  right: 0;
  float:right;
}
 
.bb {
  width: 560px;
  height: 420px;
  margin: auto;
  z-index:1;
  color: #fff;
 /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);*/
}
.bb::before, .bb::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 560.0px, 0px, 0px);
  }
/* 25% {
    clip: rect(0px, 10px, 560.0px, 0px);
  }*/
  50% {
    clip: rect(550.0px, 560.0px, 560.0px, 0px);
  }
  75% {
    clip: rect(0px, 560.0px, 560.0px, 550.0px);
  }
}       
